<template>
  <section class="login-container">
    <div class="login-box">
      <div class="login-box-left">
        <div>
          <img style="margin-top: 60px" src="../../public/meta.svg" alt=""></img>
        </div>
        <div>WebSocket <br/> Online Chat Room</div>
      </div>
      <div class="login-div">
        <div class="login-title">Login In Now</div>
        <div class="username">
          <n-input ref="uinput" type="text" v-model:value="usernameValue" maxlength="30" show-count round clearable placeholder="请输入用户名" size="large"></n-input>
        </div>
        <div class="password">
          <n-input ref="pinput" type="password" v-model:value="passwordValue" maxlength="30" show-count round clearable placeholder="请输入密码" show-password-on="mousedown" size="large"></n-input>
        </div>
        <div class="login-button">
          <n-button :loading="loading" strong secondary round type="success" size="large" @click="handleLogin">Click Login</n-button>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">

import {ref} from 'vue';
import {login} from '@/api/login/api'
import router from "@/router";
import {useMessage,NInput } from 'naive-ui'

const usernameValue = ref<string | null>();
const passwordValue = ref<string | null>();
const uinput = ref<InstanceType<typeof NInput> | null>();
const pinput = ref<InstanceType<typeof NInput> | null>();
const message = useMessage();

//新增加载显示
const loading = ref<boolean>(false);

async function handleLogin() {
  loading.value = true;
  if(!usernameValue.value){
    message.warning('用户名不能为空！');
    uinput.value?.focus();
    loading.value = false;
    return;
  }
  if(!passwordValue.value){
    message.warning('密码不能为空！');
    pinput.value?.focus();
    loading.value = false;
    return;
  }

  try {
    const res = await login(usernameValue.value, passwordValue.value)
    if(res?.code === '200'){
      message.success('登录成功');
      router.replace('/home');
    }else {
      message.error(res?.message);
      usernameValue.value = '';
      passwordValue.value = '';
      uinput.value?.focus();
    }
  }catch (err) {
    console.log('登录请求异常:', err);
    message.error('网络异常，无法连接服务器');
  }finally {
    loading.value = false;
  }
}

</script>

<style scoped>

.login-container {
  height: 100vh;
  width: 100vw;
  background-image: url('@/assets/img/login_bg.jpg'); /*背景图片*/
  background-size: cover;  /*填充*/
  background-repeat: no-repeat;  /*不重复*/
  background-position: center;  /*居中*/
  background-attachment: fixed;  /*固定*/

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

}

.login-box {
  width: 800px;
  height: 600px;
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  justify-content: left;

  border-radius: 20px;
  box-shadow: 5px 5px 5px #888888, -5px -5px 5px #DDDDDD;
  overflow: hidden;
}

.login-box-left {
  height: 100%;
  width: 40%;
  background-color: #9ddd9d;
}

.login-div {
  height: 100%;
  width: 60%;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;

  .login-title {
    margin-top: 150px;
    font-size: 30px;
    font-weight: 700;
    color: #777676;
  }

  .username {
    width: 350px;
    margin-top: 40px;
  }
  .password {
    width: 350px;
    margin-top: 20px;
  }
  .login-button {
    margin-top: 20px;
  }
}

</style>